import React from "react";
import { Navigate, NavLink } from 'react-router-dom'
export default class extends React.Component {
  state = {
    count: 1,
    isToFn: false
  };
  addCount() {
    this.setState({
      count: this.state.count + 1,
    });
  }
  // 挂载节点
  constructor(props) {
    super(props);
    console.log(1);
		this.h2 = React.createRef()
  }
  render() {
    console.log(2);

    const { count } = this.state;
    const { message, modifyMessage } = this.props;
    console.log(this.props)
    if(this.state.isToFn) {
      return <Navigate to="/fn"></Navigate>
    }

    return (
      <div>
        <button onClick={ () => this.setState({ isToFn: true }) }>去函数组件</button>
        <NavLink to='/fn'>去fn</NavLink>
        <h2 ref={ this.h2 }> 类组件</h2>
        <h3>{message}</h3>
        <button onClick={modifyMessage}>修改message</button>
        <p>{count}</p>
        <button onClick={() => this.addCount()}>+1</button>
      </div>
    );
  }
  componentDidMount() {
    console.log(3);
		console.log(this.h2)
  }
  // 更新阶段
  shouldComponentUpdate(nextProps, nextState) {
		console.log('变化前数据')
		console.log(this.props, this.state)
		console.log('变化后数据')
		console.log(nextProps, nextState)
		return true
	}
  componentDidUpdate(prevProps, prevState) {
		console.log('--------------------------------------------------------')
		console.log('变化前数据')
		console.log(prevProps, prevState)
		console.log('变化后数据')
		console.log(this.props, this.state)
		console.log('更新完毕')
	}

	// 销毁
	componentWillUnmount() {

	}
}
